<template>
  <div id="app">
    <!--<img src="./assets/logo.png">
    <router-view></router-view>-->
    <div class="box">
      <p id="title">版权云大数据监测平台</p>
      <ul class="content">
        <li id="ct-left">
          <div class="title-top">
            <Slots>
              <p slot="ctTitle" class="ct-tile">人事</p>
              <p slot="ctData" class="ct-data">2323</p>
            </Slots>
          </div>
          <div class="ct-lf-top">
            <!--<Sha></Sha>-->
            <!--<div style="color:#000;">放大看</div>-->
            <Lines></Lines>
          </div>
          <div class="ct-lf-middle"></div>
          <div class="ct-lf-bottom"></div>
        </li>
        <li id="ct-content">
          <div class="ct-ct-top" >

          </div>
          <div class="ct-ct-middle"></div>
          <div class="ct-ct-bottom"></div>
        </li>
        <li id="ct-right">
          <div class="title-top">
            <Slots>
              <p slot="ctTitle" class="ct-tile">人事</p>
              <p slot="ctData" class="ct-data">2323</p>
            </Slots>
          </div>
          <div class="ct-rg-top"></div>
          <div class="ct-rg-middle"></div>
          <div class="ct-rg-bottom"></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import Slots from '@/page/slot/title';
  import Lines from '@/components/line';
  import Sha from '@/components/aaa';
  export default {
    name: 'app',
    components: {
      Slots,
      Lines,
      Sha
    }
  }
</script>
<!--<link rel="stylesheet" href="assets/css/base.css">-->
<style scoped lang="scss">
  @import "assets/css/base.css";

  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    width: 100vw;
    height: 100vh;
    background: url("assets/timg.jpg");
    background-size: 100% 100%;
  }

  .box {
    width: 100vw;
    height: 100vh;
    background: url("assets/bgc1.png") no-repeat center;
    background-size: 96% 96%;
    & > #title {
      height: 10vh;
      line-height: 10vh;
      text-align: center;
      color: #fff;
      font-size: 1.2em;
      font-weight: bold;
      letter-spacing: 6px
    }
  }

  .content {
    display: flex;
    color: #fff;
    width: 92vw;
    height: 86vh;
    /*background-color: rgba(106, 456, 96, 0.5);*/
    margin: 0 auto;
    text-align: center;

    #ct-left {
      width: 20%;
      margin-left: 1%;
      &>.title-top {
        width: 100%;
        height: 10%;
        background: url("assets/left.png") no-repeat center;
        background-size: 98% 98%;
        text-align: left;
        .ct-tile {
          color: #fff;
          padding-top: 2%;
          font-size: 0.65em;
          margin-left: 1em;
          line-height: 2;
        }
        .ct-data {
          font-size: 0.8em;
          color: #f4f4ff;
          margin-left: 3em;
          line-height: 1;
        }
      }
      .ct-lf-top, .ct-lf-middle, .ct-lf-bottom {
        width: 100%;
        height: 29%;
        margin-top: 2%;
        background: url("assets/bgc-2.png") no-repeat center;
        background-size: 100% 100%;
      }
    }
    #ct-content {
      width: 56%;
      margin: 0 1%;
      .ct-ct-top{
        height: 5%;
        width: 100%;
        text-align: center;
      }
      .ct-ct-middle{
        width: 100%;
        height: 61%;
        margin: 2% 0;
        background: url("assets/bgc-1.png") no-repeat center;
        background-size: 100% 100%;
      }
      .ct-ct-bottom{
        width: 100%;
        height: 29%;
        background: url("assets/bgc-2.png") no-repeat center;
        background-size: 100% 100%;
      }
    }
    #ct-right {
      width: 20%;
      margin-right: 1%;
      &>.title-top{
        width: 100%;
        height: 10%;
        background: url("assets/right.png") no-repeat center;
        background-size: 98% 98%;
        text-align: right;
        .ct-tile {
          color: #fff;
          padding-top: 2%;
          font-size: 0.65em;
          margin-right: 1em;
          line-height: 2;
        }
        .ct-data {
          font-size: 0.8em;
          color: #f4f4ff;
          margin-right: 3em;
          line-height: 1;
        }
      }
      .ct-rg-top, .ct-rg-middle, .ct-rg-bottom {
        width: 100%;
        height: 29%;
        margin-top: 2%;
        background: url("assets/bgc-2.png") no-repeat center;
        background-size: 100% 100%;
      }
    }
  }
</style>
